<template>
	<view>
		<navigator class="goods_item" v-for="(item,i) in goods_items" :key="i" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
			<!-- 左边图片 -->
			<view class="goods_item_left">
				<image class="goods_img" :src="item.goods_small_logo||defaultPic"></image>
			</view>
			<!-- 右边详细信息 -->
			<view class="goods_detail">
				<!-- 商品的名称 -->
					<view class="goods_name">{{item.goods_name}}</view>
					<!-- 价格 -->
					<view class="goods-info-box">
						<view class="goods-price">¥{{item.goods_price||toFixed}}</view>
					</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import { toast } from '../../utils/common';
	
	export default {
		data() {
			return {
				queryObj: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				total:0,
				isloading : false, //是否正在请求数据 
				goods_items:[] //商品列表
			};
		},
		onLoad(options) {
			this.queryObj.query = options.query || ''
			this.queryObj.cid = options.cid || ''
			this.getGoodsList()
		},
		methods:{
			//获取商品列表
			async getGoodsList(){
				this.isloading = true; //打开节流阀
				const { data:res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
				this.isloading = false; //关闭节流阀
				if( res.meta.status !== 200 ) return toast("请求数据失败！")
				// 为商品详情对象赋值 展开运算符 新旧数据进行拼接
				this.goods_items = [ ...this.goods_items,...res.message.goods ] 
				this.total = res.message.total
			}
		},
		// 触底事件
		onReachBottom(){
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total ) return toast("数据加载完毕！") //判断是否还有下一页数据
			
			if(this.isloading) return; //判断是否在进行其他请求
			
			this.queryObj.pagenum += 1 //页码自增+1
			this.getGoodsList();
		}
	}
</script>

<style lang="scss">
.goods_item{
	display: flex;
	border-bottom: 1px solid #d0d0d0;
	
	.goods_item_left{
		padding-left: 5px;
		padding-top: 2px;
	}
	
	.goods_detail{
		margin-left: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.goods_img{
		height: 100px;
		width: 100px;
	}
	
	.goods_name{
		font-size: 13px;
	}
	
}
</style>
